<!doctype html>
<html>
    <head></head>
    <body>
        hello,world
        <input type="text" id="model">
        <p id="word"></p>
        <script>
            const model = document.getElementById('model');
            const word = document.getElementById('word');
            var obj = {};
            const newObj = new Proxy(obj, {
                get: function (target, key, recevier) {
                    console.log(target,key, recevier, 'get');
                    return Reflect.get(target, key, recevier);
                },
                set: function (target, key, value, recevier) {
                    console.log(target, key, value, recevier, 'set');
                    if(key = 'text') {
                        model.value = value;
                        word.innerHTML = value;
                    }
                    return Reflect.set(target, key, value, recevier);
                }
            });
            model.addEventListener('keyup', function(e) {
                console.log(e.target.value)
                newObj.text = e.target.value;
            });
            setTimeout(() => {
                console.log(newObj.text, 'newObj')

            }, 3000);
        </script>
    </body>
</html>